<template>
  <div class="passwordForgot">
    <el-row class="passwordForgot-a height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{passwordChange.passwordForgot}}</span>
    </el-row>
    <el-row class="passwordForgot-b">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item prop="answer1">
          <div style="font-size:16px;color:#42526A">
            <span>{{passwordChange.labelQuestion1}}</span>
            <span>{{question1}}</span>
          </div>
          <el-input
            v-model.trim="ruleForm.answer1"
            :placeholder="passwordChange.placeholderAnswer"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="answer2">
          <div style="font-size:16px;color:#42526A">
            <span>{{passwordChange.labelQuestion2}}</span>
            <span>{{question2}}</span>
          </div>
          <el-input
            v-model.trim="ruleForm.answer2"
            :placeholder="passwordChange.placeholderAnswer"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="8" align="right">
              <Kt-button
                class="cancelBtn boxShadowButton"
                :size="size"
                :label="passwordChange.cancel"
                :loading="loading"
                @click="cancel"
              ></Kt-button>
            </el-col>
            <el-col :span="8" align="right">
              <Kt-button
                class="submitBtn boxShadowButton"
                :size="size"
                :label="passwordChange.next"
                :loading="loading"
                @click="submitForm('ruleForm')"
              ></Kt-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import juxing_Small from "../../assets/lifeGroupimg/juxing_small.png";
export default {
  name: "PasswordForgot",
  data() {
    return {
      passwordChange: this.$t("m.passwordChange"), //引入 lang 里面的字符串资源,
      size: "medium", //按钮的尺寸
      image: { juxing_Small },
      ruleForm: {
        loginName: "", //登录名
        answer1: "", //答案1
        answer2: "" //答案2
      },
      question1: "",
      question1Id: "",
      question2: "",
      question2Id: "",
      loading: false,
      acceptLanguage: "ja_JP" //数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods: {
    //取消修改
    cancel() {
      this.$router.push({ path: "/login" });
    },
    /* 
      修改密码
    */
    submitForm(datainfo) {
      console.log(datainfo, "------");
      this.$refs[datainfo].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          let params = new Object();
          params.loginName = this.ruleForm.loginName;
          params.question1Answer = this.ruleForm.answer1;
          params.question2Answer = this.ruleForm.answer2;
          console.log(params);
          this.$postJson(
            "uac/auth/checkQuestionActive",
            params,
            this.acceptLanguage
          ).then(res => {
            console.log(res);
            if (res.code == 200) {
              if (res.result != null) {
                this.$message({ message: res.message, type: "success" });
                sessionStorage.setItem("resetPwdKey", res.result);
                setTimeout(() => {
                  // bus.$emit("homePage", {
                  //   type: "jump",
                  //   path: "/PasswordRetrieve",
                  //   title: this.passwordChange.retrieve
                  // });
                  this.$router.push({ path: "/PasswordRetrieve" });
                }, 500);
              } else {
                this.$message({
                  message: this.$t("m.passwordChange").anserr,
                  type: "error"
                });
              }
            } else {
              this.$message({ message: res.message, type: "error" });
            }
          });
        } else {
          console.log("回答错误!");
          return false;
        }
      });
    },

    /*获取用户安全问题列表*/
    getUserQuestionList() {
      console.log(this.ruleForm.loginName);
      // if (!this.ruleForm.loginName) {
      //   this.$message({
      //     type: "error",
      //     message: this.$t("m.passwordChange").err
      //   });
      //   setTimeout(() => {
      //     this.$router.push({ path: "/login" });
      //   }, 200);
      // }
      var url = "uac/auth/queryUserSecurityQuestionList";
      this.$postForm(url, {
        loginName:sessionStorage.getItem("musername")
      }).then(res => {
        if (res.code == 200) {
          if (res.result.question1Id) {
            this.question1Id = res.result.question1Id;
            this.question2Id = res.result.question2Id;
            this.getQuestionList();
          } else {
            this.$message({
              type: "error",
              message: this.$t("m.passwordChange").queserr
            });
            setTimeout(() => {
              this.$router.push({ path: "/login" });
            }, 200);
          }
        }
      });
    },
    //通过安全问题id找对应的问题
    getQuestionList() {
      //queryUserSecurityQuestionList
      //querySecurityQuestionList
      this.$postJson(`uac/auth/querySecurityQuestionList`).then(res => {
        if (res.code == 200) {
          res.result.forEach(item => {
            if (item.id == this.question1Id) {
              this.question1 = item.securityQuestion;
            }
            if (item.id == this.question2Id) {
              this.question2 = item.securityQuestion;
            }
          });
        }
        console.log(this.question1);
      });
    }
  },
  computed: {
    //使用computed计算属性来操作form表单规则的国际化
    rules() {
      return {
        passwordChange: this.$t("m.passwordChange"), //引入 lang 里面的字符串资源,
        //注意此处的return，别忘记了
        answer1: [
          {
            required: true,
            message: this.$t("m.passwordChange.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 8,
            message: this.$t("m.passwordChange.placeholderAnswer"),
            trigger: "blur"
          },
          {
            pattern: /[\u4e00-\u9fa5a-zA-Z\d]{1,8}/,
            message: this.$t("m.passwordChange.notChineseMessage1")
          }
        ],
        answer2: [
          {
            required: true,
            message: this.$t("m.passwordChange.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 8,
            message: this.$t("m.passwordChange.placeholderAnswer"),
            trigger: "blur"
          },
          {
            pattern: /[\u4e00-\u9fa5a-zA-Z\d]{1,8}/,
            message: this.$t("m.passwordChange.notChineseMessage1")
          }
        ]
      };
    }
  },
  created() {
    this.ruleForm.loginName = sessionStorage.getItem("musername");
  },
  mounted() {
    this.getUserQuestionList();
  },
  components: {
    KtButton
  }
};
</script>
<style lang="scss" scoped>
.passwordForgot {
  padding-bottom: 20px;
  .height40 {
    text-align: center;
    height: 40px;
    line-height: 40px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .passwordForgot-b {
    margin: 0 auto;
    width: 60%;
    padding: 40px 30px;
    .select100 {
      width: 100%;
    }
    /* 更新按钮  修改样式  添加阴影 */
    .submitBtn {
      background: #ff0045;
      color: #ffffff;
    }
  }
}
/* 修改element-ui input文本框默认的样式 */
// /deep/ .passwordForgot-b .el-input__inner {
//   border: none !important;
//   border-radius: 0px !important;
//   border-bottom: 1px solid #999999 !important;
//   background-color: #f6f6f6 !important;
// }

/* 修改每一个form表单小项的margin */
/deep/ .passwordForgot-b .el-form-item {
  margin-bottom: 42px !important;
}
.imgEye {
  position: absolute;
  top: 5px;
  right: 25px;
  cursor: pointer;
}
</style>